/*导航菜单部分样式
 开发时注意要修改.scss的样式表，不要直接修改.css样式表！！！
 * */
//small screen
$screen-sm : 767px;
//middle screen
$screen-md : 992px;
//big screen
$screen-lg : 1200px;
//根据amazeui源码，html节点的font-size为10px!!!拟码真坑！！chrome最小12px
$htmlFontSize : 12px;
html{
  font-size: $htmlFontSize;
  overflow-x: hidden;
  @media screen and (max-width: $screen-sm){
    font-size: 10px;
  }
}
 //第一部分
 .first-wrap{
     background: url("../img/first-bg.png") no-repeat;
     background-size:cover;      
     position: relative;
     height: 50rem;  
     &>div{
         display: table; 
         .top-logo{
             width: 50%;
         }
         .logo{
             padding-top:5%;
             width: 40%;
         }        
         p{color: white;}
         .video-wrap{
             position: relative;
             display: table;
             span{
                 position: absolute;
                 top: 45%;
                 left: 40%;
                 cursor: pointer;
                 color: white;
             }
         }
     }
     .line{
         position: absolute;
         z-index: 50;       
         top: 65%;
         left: 0px;
     }
     @media screen and (max-width:$screen-sm) {
        height: 30rem;
     	&>div{
     	    text-align: center;
     	    .logo,.top-logo{width: 100%;}
     	    .logo{padding: 20px;}
     	    p{
     	       font-size: 1.5rem;
     	    }
     	}
     }
    
 }
 
 //第二部分
 .second-wrap{
     &>h1{
         font-family:"幼圆";
         font-weight: normal;
         position: relative;
         padding-top: 10%;
         img{
              display: table;
              position: absolute;
              z-index: 100;
              top: -190%;
              left:0;
           padding-left: 10%;
         }
     }
     @media screen and (max-width:$screen-sm) {
     	h1{
     	    padding-top: 20%;
     	   img{
     	       width: 100%; 
     	       top:-70%;
               left: 0;
             padding-left: 5%;
     	   } 
     	   
     	}
     	ul li{
     	    text-align: center;
     	    img{width: 70%;margin: 0 auto;}
     	}
     }
 }
  
 //教师端部分
.tea-wrap{
         width:100%;
         padding-top:10%;
         padding-bottom:6%;
//       padding-left:27%;

         background: url(/img/teabackground.png) no-repeat;
         background-size:100% 100%;
         @media screen and (min-width: $screen-sm) and (max-width: $screen-md) {
               background:url(/img/phone.png) no-repeat; 
//          padding-bottom:50%;   
            background-size: 100% 100%; 
                }
        @media screen and (max-width: $screen-sm) {
            overflow: hidden;
            background:url(/img/phone.png) no-repeat; 
//          padding-bottom:50%;   
            background-size: 100% 100%; 
        }  
            .greenSide{
                margin-top:10%;
                position:relative;
                border: 1px solid #339966;
                width: 68%;
//              height: 30%; 
                top: 34%;
                left: 20%;   
                padding-top:1%;
//              padding-bottom:3%;
                @media screen and (min-width: $screen-sm) and (max-width: $screen-md) {
                padding-bottom:30%;
                }
                @media screen and (max-width: $screen-sm) {
                    height:23%;
                    margin-top:10%;
                     top: 17%;
                     left: 21%;
                     padding: 0 5% 20%;
                }
                .teacherPassage{
                    margin:10% 2% 0% 3%;
                }
                .ipad{
                    width:100%;
                    margin-top:-10%;
                    margin-left:-10%;
                    position:absolute;
//                  left:-12%;
                    @media screen and (min-width: $screen-sm) and(max-width:$screen-lg){
                        margin-left:10%;  
                        margin-top:2%;
                        width:80%;
                    }
                     @media screen and (max-width: $screen-sm) {
                         margin-left:1%;
                    }
                }
                h4{
                    font-size:1.8rem;
                    font-weight: normal;
                }
                .titleWhite{
                    color:#fff;
                }
                .titleGreen{
                    color:#339966;
                }
                p{
                    font-size:1.2rem;
                }
                button{
                    width:152px;
                    display: inline-block;
                    margin-bottom: 0;
                    padding: .5em 1em;
                    font-size: 1.6rem;
                    font-weight: 400;
                    line-height: 1.2;
                    text-align: center;
                    white-space: nowrap;
                    background-image: none;
                    border: 1px solid transparent;
                    border-radius: 0;
                    cursor: pointer;
                    outline: 0;
                    font-size:1.2rem;
                    background-color:#9ACC29;
                    color:#fff;
                    border-radius:3px;
                    margin-top:13%;
                    margin-left:16%;
                    margin-bottom:10%;
                }
                
            }
            .downloadTea{
                background-color:#9ACC29;
                border: 1px solid transparent;
                border-radius:3px;
                color:#fff;
                    display:none;
                     @media screen and (min-width: $screen-sm) and (max-width: $screen-lg) {
                        display:block; 
//                      margin:0 30%;
                        margin-top: 55%;
                        margin-left: 39%;
                        display: block;
                        border-radius: 3px;
                        background-color: #9ACC29;
                        color: #fff;
                        padding: 3%;
                        font-size: 1.4rem;
                    }@media screen and (max-width: $screen-sm){
                        display:block; 
                        margin-top: 37%;
                        margin-left: 28%;
                    }
                }
}
 
 //成功案例
 .success-wrap{
     padding-top:6%;
     margin:7%;
     position: relative;
     @media screen and (max-width: $screen-sm) {
            padding-bottm:60%;
            
        }
     img{
         margin-left:30%;
         @media screen and (min-width: $screen-sm) and (max-width: $screen-lg) {
           margin-left: 10%;
            width: 80%;
            margin-top: -6%; 
        }
         
          @media screen and (max-width: $screen-sm) {
              width:80%;
            margin-left:10%;  
            margin-top:-6%;
            
        }
     }
     .greenSide{
         border:1px solid #339966;
         @media screen and (min-width: $screen-sm) and (max-width: $screen-lg) {
                       padding-bottom:10%; 
                } 
         p{
              font-size:1.2rem;
          }
          .successPassage{
              margin-left:32%;
              margin-top:5%;
              position:relative;
              @media screen and (min-width: $screen-sm) and (max-width: $screen-lg) {
                        margin-left:18%;
                        margin-top:5%;  
                } 
                @media screen and (max-width: $screen-sm) {
                        margin-left:2%;
                        margin-top:5%;  
                        padding-left:14%;
                }
                .successTitle{
                    font-size:1.3rem;
                    font-weight: bold;
                }
                .applyTea{
                    @media screen and (min-width: $screen-sm) and (max-width: $screen-lg) {
                    margin-bottom:28%;
                    postion:absolute;
                     top:10%;
                     display:none;
                         
                    }
                    @media screen and (max-width: $screen-sm) {
                        margin-bottom:10%;
                         postion:absolute;
                         top:10%;
                          display:none;
                    }
                }
              button{
                  background-color:#9ACC29;
                  color:#fff;
                  font-size:$htmlFontSize;
                  margin-bottom:13%;
                  padding:3%;
              }
          }
          .success{
              margin-top:-9%;
              @media screen and (min-width: $screen-sm) and (max-width: $screen-lg) {
                        width:50%;
                        margin-top:-13%;  
                       
                } 
               @media screen and (max-width: $screen-sm) {
                   width:50%;
                        margin-left:16%; 
                        margin-top:-13%; 
                }
          }
       
                  
        }  
     }
      .apply{
            display:none;
             @media screen and (min-width: $screen-sm) and (max-width: $screen-lg) {
                   display:block;
                   border-radius:3px;
                  background-color:#9ACC29;
                  color:#fff;
                  font-size:$htmlFontSize;
                  margin-bottom:13%;
                  padding:3%;
                  margin-top: 10%;
                  margin-left: 23%;
                  font-size:1.6rem;
                  padding: 3% 10% 3% 10%;
                } 
                @media screen and (max-width: $screen-sm) {
                  display:block;
                   border-radius:3px;
                  background-color:#9ACC29;
                  color:#fff;
                  font-size:$htmlFontSize;
                  margin-bottom:13%;
                  padding:3%;
                  margin-top: 10%;
                  margin-left: 20%;
                  font-size:1.4rem;
                }
 }
 
 //学生端部分
//像素转rem
@function pxTorem($px){
  @return $px / $htmlFontSize *1rem;
}
 .stu-wrap{
   position: relative;
  font-family:  "Microsoft YaHei","微软雅黑",STXihei,"华文细黑",Georgia, "Times New Roman", serif;
  .stuBG{
    background-image: url("/img/stu-bg.png");
    padding: pxTorem(70px) pxTorem(10px);
    color: #fff;
    h2{
      font-size: pxTorem(30px);
      font-weight: normal;
      span{
        color: #53A885;
      }
    }
    p{
      font-size: pxTorem(14px);
    }
  }
  .downloadWarp{
     padding: pxTorem(60px) pxTorem(10px);
     .tips{
       font-size: pxTorem(16px);
       margin-bottom: pxTorem(45px);
       overflow: hidden;
       clear: both;
        img,div{
          float: left;
        }
       div{
         padding-left: pxTorem(20px);
         width: 60%;
         p.title{
           color: #5E5E5E;
           margin-bottom:pxTorem(5px);
         }
         p.context{
           color : #333;
           margin: 0;
         }
       }
     }
     .downloadBtnWarp{
       @mixin download-btn{
         margin-right: pxTorem(40px);
         background-color: #9ACC29;
         border-color: #9ACC29;
         color: #fff;
         font-size: pxTorem(14px);
         padding: 0;
       }
       @mixin download-icon($tb,$right,$left){
         $wh : 28px;
         width: pxTorem($wh);
         height: pxTorem($wh);
         margin: $tb $right $tb $left;
       }
       .download-btn-barcode {
         @include download-btn;
         padding-left: pxTorem(34px);
       }
       .download-btn-pc{
         @include download-btn;
         padding-right: pxTorem(61px);
       }
       @media screen and (max-width: $screen-sm){
         .download-btn-barcode {
           text-align: center;
           display: block;
           margin: 0 auto;
         }
         .download-btn-pc{
           display: none;
         }
       }
       .barcode{
         @include download-icon(pxTorem(12px),pxTorem(17px),pxTorem(24px));
       }
       .pc{
         @include download-icon(pxTorem(12px),pxTorem(24px),pxTorem(17px));
       }
     }
   }
  .phone{
    position: absolute;
    right: pxTorem(90px);
    top: pxTorem(90px);
    height: pxTorem(590px);
    width: auto;
    @media screen and (max-width: $screen-sm){
        display: none;
    }
    @media screen and (min-width: $screen-sm) and (max-width: $screen-md){
      right: pxTorem(10px);
    }
  }

 }
 
 //关于部分
 .about-wrap{
   font-family:  "Microsoft YaHei","微软雅黑",STXihei,"华文细黑",Georgia, "Times New Roman", serif;
   .contat{
     padding-left: 10px;
     border-bottom:1px solid #2E3340;
     .contat-title{
       margin-bottom: 0;
       .text{
         vertical-align: bottom;
         font-weight: bold;
         color: #2E3340;
         border-bottom: 5px solid #2E3340;
       }
     }
   }
   @mixin border-radius($radius){
     -moz-border-radius: $radius;
     -webkit-border-radius: $radius;
     -o-border-radius: $radius;
     -ms-border-radius: $radius;
     border-radius: $radius;
   }
   $timeLineHeight : 500px;
   .timeLineMobile{
     ul.am-slides li{
       height: 210px;
     }
     @media screen and (min-width: $screen-sm){
       display: none;
     }
   }
   .timeLine{ 
     position: relative;
     height: $timeLineHeight;
     @media screen and (max-width: $screen-sm){
       display: none;
     }
   }
   .timelineList,.timelineUI{
     height: $timeLineHeight;
     border-bottom: 1px solid #b5b5b5;
     overflow: hidden;
     position: absolute;
     top : 0;
   }
   .middleLine{
     position: absolute;
     height: 100%;
     width: 1px;
     background-image:  url("/img/about-timeline.png");
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     margin: auto;
   }
   .timeUp,.timeDown{
     position: absolute;
     text-align: center;
     margin: auto;
     left: 0;
     right: 0;
     z-index: 20;
     cursor: pointer;
   }
   .timeDown{
     bottom: 0;
   }
   .timeUp{
     top: 0;
   }
   .tabArea{
     width: 100%;
     text-align: center;
     margin: 0 auto;
   }
   .divSpace{
     height: 150px;
   }
   $spaceHeight : 150px;
   $tabHeight : 210px;
   .tab{
     height: $tabHeight;
     clear: both;
     >div{
       float: left;
     }
   }
   .tabSpace,.tabItem{
     width: 42%;
     height: 100%;
   }
   @mixin tabMixin($tabColor,$timeColor){
     border: 1px $tabColor solid;
     .time {
       color: $timeColor;
       background-color: $tabColor;
     }
   }

   .divSpace{
     height: $spaceHeight;
   }
   .tabItem{
     $tabColor : #DFDFDF;
     $timeColor : #3C3C3C;
     @include border-radius(3px);
     @include tabMixin($tabColor,$timeColor);
     @media screen and (max-width: $screen-sm){
       margin: 5px 5%;
       width: 90%;
     }
     text-align: left;
     p{
       margin: 0;
     }
     .content{
       height: 75%;
       padding: pxTorem(20px) pxTorem(41px);
       p.title{
         color: rgb(51,51,51);
         font-size: pxTorem(14px);
         font-weight: bold;
       }
       p.text{
         padding-top: pxTorem(28px);
         color: rgb(102,102,102);
         font-size: pxTorem(14px);
       }
     }
     .time{
       height: 25%;
       padding: pxTorem(5px) pxTorem(41px);
       .monthday{
         font-size: pxTorem(17px);
       }
       .year{
         font-size: pxTorem(13px);
       }
     }
   }
   .currentTabItem{
     $tabColor : #222A32;
     $timeColor : #fbfbfb;
     @include tabMixin($tabColor,$timeColor);
   }
   .dot{
     z-index: 10;
     width: 16%;
     height: 100%;
     position: relative;
     img{
       position: absolute;
       bottom: 10px;
       left: 0;
       right: 0;
       margin: auto;
     }
   }
     
 }
 
 //分公司地址部分
 .contat-wrap{
     $fontColor:#2E3340;
     margin-top:100px;
     .contat{
         border-bottom:1px solid #2E3340;
         margin-bottom: 50px;
         .contat-title{
             padding-left: 10px;
             .text{
                 font-weight: bold;
                 color: $fontColor;
                 border-bottom: 5px solid $fontColor;
             }
         }
     }
     .address{
         span{
             font-size: 1.6rem;
             font-weight: bold;
         }
         p{
             font-size: 1.2rem;
         }
         
     }
     
 }

 
 //固定栏部分
 .fixed-wrap{
     display: table;
     position: fixed;
     right: 20px;
     top: 70%;  
     .tell-float{
             position: absolute;
             width: 250px;
             bottom: 0px;
             left: -200px;
             background-color: white;
             box-shadow: 0px 5px 15px #888888;
             -webkit-box-shadow: 0px 5px 15px #888888;
             &>span{
                 background-color: #00C0FF;
                 color: white;                 
             }
             &>ul{
                 list-style: none;
                 padding: 0;
                 li{line-height: 3rem;}
             }
      }
      .share{
          width: 205px;
          height: 50px;
          background-color: #DCDCDC;
          position: absolute;
          left: -197px;
          top: 0;
          border-radius: 10px 0px 0px 10px;
          -webkit-border-radius: 10px 0px 0px 10px;
          -moz-border-radius: 10px 0px 0px 10px;
//        display: none;
      }    
     .btn{
         display: table;
         position: relative;
         background-color: #DCDCDC;
         cursor: pointer;
         margin-bottom: 10px;
         width: 50px;height: 50px;padding: 5px;
         border-radius: 10px;
         box-shadow: 1px 5px 10px #888888;
         -webkit-box-shadow: 1px 5px 10px #888888;
     }
     .btn-share:hover{
         .share{
             animation: myfirst 1s;
         }
     }
     @keyframes myfirst
        {
        from {width: 0px;}
        to {width: 205px;}
        }
    @-webkit-keyframes myfirst {
    	from {width: 0px;}
        to {width: 205px;}
    }
    @-o-keyframes myfirst {
    	from {width: 0px;}
        to {width: 205px;}
    }
    @-moz-keyframes myfirst {
    	from {width: 0px;}
        to {width: 205px;}
    }
    @keyframes myfirst {
    	from {width: 0px;}
        to {width: 205px;}
    }

}
 //二维码对话框
 .barcodeModel{
   .am-modal-hd{
     background-color: #00C1FF;
     color: #FFF;
   }
   #stuBarcode canvas{
     margin-top: 30px ;
     text-align: center;
     width: 70%;
   }
   .tips{ 
     margin: 0;
     text-align: center;
     margin-top: 10px;
     font-size: pxTorem(12px);
   }

 }

#weixinCover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  z-index: 20000;
  img {
    position: fixed;
    right: 25px;
    top: 5px;
    width: 260px;
    height: 160px;
    z-index: 999;
  }
}

